<script setup></script>

<template>
  <view class="home-item-container">
    <view class="btn-wrap">
      <navigator
        url="/pages/musicList/musicList?id=2105681544"
        open-type="navigate"
      >
        <view class="btn">
          <i class="iconfont icon-yinle1"></i>
        </view>
        <text class="btn-title">每日推荐</text>
      </navigator>
    </view>
    <view class="btn-wrap">
      <view class="btn">
        <i class="iconfont icon-bofangliebiao"></i>
      </view>
      <text class="btn-title">歌单</text>
    </view>
    <view class="btn-wrap">
      <view class="btn">
        <i class="iconfont icon-paihang"></i>
      </view>
      <text class="btn-title">排行榜</text>
    </view>
    <view class="btn-wrap">
      <view class="btn">
        <i class="iconfont icon-diantai"></i>
      </view>
      <text class="btn-title">电台</text>
    </view>
  </view>
</template>

<style lang="scss">
.home-item-container {
  padding: 0 30rpx;
  display: flex;
  justify-content: space-around;

  .btn-wrap {
    margin: 40rpx 0;
    text-align: center;
    .btn {
      height: 110rpx;
      width: 110rpx;
      line-height: 110rpx;
      text-align: center;
      background-color: #fff;
      box-shadow: 0px 0px 4px #ccc;
      border-radius: 50%;
      color: $primaryColor;
      .iconfont {
        font-size: 60rpx;
      }
    }
    .btn-title {
      display: block;
      margin-top: 10rpx;
      font-size: 28rpx;
    }
  }
}
</style>
